<template>
	<view class="inner_page">
		<home-barTittle :title="title" :showBack="true"></home-barTittle>
		
		<video  id="myVideo" :poster="info.courseImg ? info.courseImg : ''" :show-center-play-btn="playbtn" :autoplay="autoplay"  style="width: 100%;" 
			@timeupdate="timeupdate"  :src="info.courseVideoUrl">
		</video>
		
		<view class="course-detail pd20_15">
			<view class="ft18 cl-main ftw600">{{info.courseName}}</view>
			<view class="flex alcenter space mt12">
				<view class="flex alcenter">
					<text class="ml10 ft18 cl-orange">标准价：</text>
					<text class="ft18 cl-orange">¥{{info.price * 1}}</text>
					<text class="ft18 cl-orange">  </text>
				</view>
				<!-- <view class="cl-notice ft12">{{info.updateTime}}</view> -->
			</view>
			<!-- <view class="ml10 ft12 cl-notice">购买任意景点后，开放当前景区所有景点视频权限</view> -->
		</view>
		<view class="tuan-detail-content mt4">
			<view class="tuan-detail-content-tab bd-bottom">
				<sub-tab :tabs="tabs" :selectIndex="selectIndex" @change="changeIndex"></sub-tab>
			</view>
			<view v-if="selectIndex == 0" class="pd16_15">
				<view >
					<view class="ft14 cl-main  lh20 mb16">
						<rich-text :nodes="info.descStr"></rich-text>
					</view>
				</view>
			</view>
			<view v-if="selectIndex == 1" class="pd16_15">
				<!-- 精品课程 -->
				<home-course :data="courseList"></home-course>
			</view>
		</view>
		
		
		<dialog-login v-if="showLogin" @loginYes="loginYes" @closed="showLogin = false"></dialog-login>
		
	</view>
</template>

<script>

import infoVue from './info.vue';
// import mapTencent from '@/components/map/map-tencent.vue';
// import mpHtml from 'mp-html/dist/components/mp-html/mp-html'
// import zaudio from 'uniapp-zaudio/zaudio'

export default {
	
	data(){
		return {
			title:"课程详情",
			courseList:[],
			
			
			isLogin:false,
			showLogin:false,
			showVideo:false,
			autoplay:false,
			playbtn:true,
			selectIndex:0,
			tabs:['课程详情','精品课程'],
			nextStep:'',
			datasa:[],
			dataconfig:[],
			id:'',
			mid:0,
			info:[],
			userPaidStatus:false,
			price:'',
			isplaytext:'已经购买',
			audioAction: {
				method: 'pause'
			}
		}
	},
	computed: {
		
	},
	onLoad(option){
		if(option.courseId){
			this.id=option.courseId
		}
	},
	
	onUnload() {
	  uni.$off('signUpSuccess');
	},
	onShow() {
		this.getCourseInfo(this.id);
		this.getCourseList()
		// // 监听报名成功的事件
		// uni.$on('signUpSuccess', (data) => {
		// 	console.log("uni.on signUpSuccess",data)
		// 	uni.showToast({
		// 		title: data.msg,
		// 		icon: 'success'
		// 	})
		// 	// 判断报名状态
		// 	this.userPaidStatus = true
		// });
	},
	onHide() {
		// this.dda.pause()
	},
	onShareAppMessage(e){
		
	},
	onShareTimeline(e){
		
	},
	methods:{
		getCourseList() {
			// let this_ = this
			let data = {};
			var limit = 3;
			data.pageSize = limit
			uni.request({
				url: this.configs.webUrl + '/miniapp/course/list',
				data: data,
				success: data => {
					console.log("courseList")
					console.log(data.data)
					if (data.data.total > 0) {
						this.courseList = data.data.rows
					}
				},
				fail: (data, code) => {}
			});
		},
		// signUp() {
		// 	//判断登录状态
			
		// 	uni.setStorage({//缓存配置信息
		// 		key: 'buydata',  
		// 		data: this.info
		// 	})
		// 	uni.navigateTo({
		// 		url:"/sub_pages/activity/sign_up_info?activityId="+this.id
		// 	})
		// },
		getCourseInfo(id) {
			console.log("getCourseInfo")
			uni.showLoading({
				title: '加载中'
			});
			// let data = {};
			if(uni.getStorageSync("userinfo").token){
				// data.token=uni.getStorageSync("userinfo").token
				this.isLogin = true
			}
			uni.request({
				url: this.configs.webUrl+'/miniapp/course/'+id ,
				// data: data,
				success: data => {
						uni.hideLoading();
						this.info=data.data.data
					
				},
				fail: (data, code) => {
					uni.hideLoading();
				}
			});
		},
		
		buys(value){
			let dataa = {};
			this.info.priced=value.price
			this.info.vippriced=value.vipprice
			this.info.pricedbuy=this.info.price
			if(uni.getStorageSync("userinfo").apiToken){
				if(this.info.isvip>1){
					this.info.pricedbuy=value.vipprice
				}
			}
			console.log(value)
			
			uni.setStorage({//缓存配置信息
				key: 'buydata',  
				data: this.info
			})
			uni.navigateTo({
				url:'/sub_pages/scenicArea/buy?id='+this.id+'&mid='+value.id
			})	
		},
		timeupdate(event){
				let _this=this;
				let currentTime = event.detail.currentTime 
				if(currentTime>this.info.mrseek && this.info.isplay==0){
					 //dda.exitFullScreen()
					 this.dda.seek(this.info.mrseek)
					 this.dda.pause()
					 this.dda.stop()
					 uni.showModal({
						title: '温馨提示',
						content: '没权限观看当前视频',
						showCancel: false,
						confirmText: "确定",
						success: function (res) {
							if (res.confirm) {
								
							} else if (res.cancel) {
								
							}
						}
					 });
				}
		},
		
		// 判断当前用户是否已经购买了当前景区的视频权限（购买任一视频权限，均开放当前景区内的所有视频权限）
		checkPaid(scenicId){
			var userinfo = uni.getStorageSync("userinfo");
			uni.request({
				url: this.configs.webUrl+'/api/scenicArea/checkPaid',
				data: {
					userId: userinfo.id,
					scenicAreaId: scenicId
				},
				method:'POST',
				
				success: data => {
					console.log("checkPaid");
					this.userPaidStatus = data.data.data;
					console.log(this.userPaidStatus);
					
					// this.checkShowVideo();
				},
				fail: (data, code) => {
				}
			});
		},
		checkShowVideo(){
			// 1.景区免费
			// 2.景区收费&景点免费
			// 3.景区收费&已付费
			this.showVideo = true;
		},
		
		contactAct(){
			if(this.isLogin == false){
				this.showLogin = true;
				this.nextStep = 'contact';
			}else{
				uni.navigateTo({
					url:'/pages/client/vipcard/adviser'
				})
			}
		},
		vipcard(){
			uni.navigateTo({
				url:'/pages/client/vipcard/index'
			})
		},
		detail(id,mid){
			uni.navigateTo({
				url:'/sub_pages/scenicArea/detail?id='+id+'&mid='+mid
			})
			
			// console.log("收费："+this.info.chargeStatus)
			// if(this.info.chargeStatus & !this.userPaidStatus){
			// 	uni.navigateTo({
			// 		url:'/sub_pages/scenicArea/buy?id='+id+'&mid='+mid
			// 	})
			// }else{
			// 	uni.navigateTo({
			// 		url:'/sub_pages/scenicArea/detail?id='+id+'&mid='+mid
			// 	})
			// }
			
		},
		buyAct(){
			if(this.price*1==0){
				uni.showToast({ title: '免费视频不需要购买',icon:"none" });
						return false; 
					}
					if(this.isLogin == false){
						this.showLogin = true;
						this.nextStep = 'buy';
					}else{
						uni.setStorage({//缓存配置信息
							key: 'buydata',  
							data: this.info
						})
						uni.navigateTo({
							url:'/sub_pages/scenicArea/buy?id='+this.id
						})
					}
				},
			loginYes(){
				if(this.nextStep == 'buy'){
					uni.navigateTo({
						url:'/sub_pages/scenicArea/buy'
					})
				}else{
					uni.navigateTo({
						url:'/pages/client/vipcard/adviser'
					})
				}
			},
			changeIndex(index){
				this.selectIndex = index;
			}
		}
	}
</script>

<style>
	.course-detail-header{
		height: 400rpx;
		box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 16rpx;
		overflow: hidden;
	}
	.course-detail-swiper{
		height: 500rpx;
	}
	.course-detail-swiper image{
		width: 100%;
		height: 400rpx;
	}
	.course-detail{
		background: #FFFFFF;
	}
	
</style>